<!--
 * @Description: 添加
 * @Author: hanyu
 * @Date: 2022-03-04 10:31:14
 * @LastEditTime: 2022-03-08 07:30:57
 * @LastEditors: hanyu
-->
<template>
    <div class=''>
        <Form ref="mForm" :model="sendParams" :rules="sendRules" :label-width="100">
            <FormItem label="备案类型" prop="filing_type">
                <Select v-model="sendParams.filing_type" class="form-item" style="width: 268px">
                    <Option v-for="(tItem, index) in webTypes" :key="index" :value="tItem.id">{{tItem.cate_name}}</Option>
                </Select>
            </FormItem>
            <FormItem label="网站名称" prop="website_name">
                <Input class="input-box" v-model="sendParams.website_name" />
            </FormItem>
            <FormItem label="网站域名" prop="website_domain">
                <Input class="input-box" v-model="sendParams.website_domain" />
            </FormItem>
            <FormItem label="备案许可证号" prop="filing_license_no">
                <Input class="input-box" v-model="sendParams.filing_license_no" />
            </FormItem>
            <FormItem label="主办者" prop="sponsor">
                <Input class="input-box" v-model="sendParams.sponsor" />
            </FormItem>
            <FormItem label="营业地" prop="place_business">
                <Input class="input-box" v-model="sendParams.place_business" />
            </FormItem>
            <FormItem label="办公地址" prop="office_address">
                <Input class="input-box" v-model="sendParams.office_address" />
            </FormItem>
            <FormItem label="接入地" prop="access_point">
                <Input class="input-box" v-model="sendParams.access_point" />
            </FormItem>
            <FormItem label="地区" prop="area">
                <Input class="input-box" v-model="sendParams.area" />
            </FormItem>
        </Form>
        <Row class="flex-j-center">
            <Button type="primary" @click="onSubmit" style="margin-right: 50px;width: 100px">确定</Button>
            <Button @click="onCancel" style="width: 100px">取消</Button>
        </Row>
    </div>
</template>

<script>
import { allApi } from '@/api/allApi.js'
export default {
  props: {
    itemData: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  watch: {
    itemData: {
      handler(nVal) {
        if (nVal) {
          this.sendParams = nVal
        }
      },
      deep: true,
      immediate: true
    },
  },
  mounted() {
    this.websiteCategory()
  },
  data() {
    //这里存放数据
    return {
      webTypes: [], //网站分类
      sendParams: {
        filing_type: '', // 备案类型
        website_name: '', // 网站名称
        website_domain: '', // 网站域名
        filing_license_no: '', // 备案许可证号
        sponsor: '', // 主办者
        place_business: '', // 营业地
        office_address: '', // 办公地址
        access_point: '', // 接入地
        area: '', // 地区
      },
      sendRules: {
        filing_type: [{ message: '请选择备案类型', required: true }],
      },
    };
  },
  //方法集合
  methods: {
    // 提交
    onSubmit() {
      this.$refs.mForm.validate(async valid => {
        if (valid) {
          try {
            this.$Spin.show();
            if (this.itemData) {
              await allApi.websiteUpdate(this.sendParams)
              this.$Message.success('修改成功')
            } else {
              await allApi.websiteAdd(this.sendParams)
              this.$Message.success('新增成功')
            }
            this.onCancel()
          } catch (error) {
            console.log(error);
          }
          this.$Spin.hide()
        }
      })
    },
    // 关闭
    onCancel() {
      this.$refs.mForm.resetFields();
      this.$emit('toList')
    },
    // 获取网站分类
    async websiteCategory() {
      this.$Spin.show();
      try {
        const res = await allApi.websiteCategory()
        this.webTypes = res.data.rows
      } catch (error) {
        console.log(error);
      }
      this.$Spin.hide();
    },
  },
}
</script>
<style lang='less' scoped>
.form-item {
  float: left;
}
.input-box {
  width: 650px;
}
/deep/ .ivu-form-item-label {
  color: #727171;
}
/deep/ .ivu-select-placeholder {
  float: left;
}
/deep/ .ivu-form-item-content {
  float: left;
  margin-left: 0 !important;
}
</style>